<template>
  <div class="main">
    <iframe
      src="http://101.132.154.10:8080/SDWeb"
      frameborder="0"
      width="1920"
      height="936"
      class="ifra"
    ></iframe>
    <div style="padding: 24px;  padding-top: 0px;" class="zindex">
      <div class="left">
        <div class="leftBlock">
          <div class="left_title">
            <p>人员定位</p>
          </div>
          <div class="blockTop">
            <div class="ddd">
              <p class="ft18" style="line-height: 40px">实时人数</p>
              <p class="bold ft28">{{ countXY }}人</p>
              <img src="../assets/img/page/man.png" alt class="renI" srcset />
            </div>
          </div>
        </div>
        <div class="leftBlock">
          <div class="left_title">
            <p>视频监控</p>
          </div>
          <div class="blockTop">
            <div class="ddd" style="display:flex">
              <div style="margin-right:24px">
                <p
                  class="ml16"
                  style="color: #1A9BFE;font-size:28px;margin-left: 5px;"
                >{{ CountMonitoring }}台</p>
                <p class="ft18" style="margin-bottom:10px">视频监控</p>
              </div>
              <el-progress
                type="circle"
                :format="format"
                color="#33e6ff"
                :percentage="100"
                :width="82"
                :stroke-width="width"
                style="margin-right: 37px"
              ></el-progress>
              <el-progress
                type="circle"
                :format="format3"
                color="#ff4b00"
                :percentage="100"
                :width="82"
                :stroke-width="width"
                style="margin-right: 37px"
              ></el-progress>
            </div>
          </div>
        </div>
        <div class="leftBlock">
          <div class="left_title">
            <p>喷淋开关</p>
          </div>
        
               <div class="blockTop">
                   <div class="ml_32" style="padding-top:5px">
            <div style="display: flex; margin-top: 20px">围栏喷淋</div>
            <div class="noo">
              <div class="redY"></div>
           <p style="color:#81838B">   off  <span style="float:right">on</span></p>
              <!-- <div class="redY1"></div> -->
            </div>

            <div class="kai">开启</div>

            <div class="guan">关闭</div>
          </div></div></div>
        </div>

        <div class="leftBlock">
          <div class="left_title">
            <p>扬尘监测</p>
          </div>
            <div class="blockTop">
          <div class="ml_32">
          
            <div style="display:flex;position: relative;
    top: 35px;">
              <div id="schart2"></div>
              <div style="position: relative;
    left: -40px;">
                <div>
                  <p style="font-size: 16px; line-height: 20px; text-align: left">PM2.5</p>
                  <p
                    style="
                font-size: 12px;
                color: #ffffff;
                width: 60px;
                text-align: left;
                line-height: 20px;
              "
                  >
                    {{
                      tianqi.pm25
                    }}
                    <span
                      class="float_right"
                    >{{ tianqi.pm25_desc }}</span>
                  </p>
                  <el-progress
                    :text-inside="true"
                    :show-text="false"
                    :stroke-width="10"
                    :percentage="tianqi.pm25"
                  ></el-progress>
                </div>
                <div>
                  <p style="font-size: 16px; line-height: 20px; text-align: left">PM10</p>
                  <p
                    style="
                font-size: 12px;
                color: #ffffff;
                width: 60px;
                text-align: left;
                line-height: 20px;
              "
                  >
                    {{
                      tianqi.pm10
                    }}
                    <span
                      class="float_right"
                    >{{ tianqi.pm10_desc }}</span>
                  </p>
                  <el-progress
                    :text-inside="true"
                    :show-text="false"
                    :stroke-width="10"
                    :percentage="tianqi.pm10"
                  ></el-progress>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="centre"></div>
      <div class="right"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { Chart, registerShape } from "@antv/g2";
import * as echarts from 'echarts';
export default {
  name: "SJZL",
  data() {
    return {
      oss: "http://jjjt.oss-cn-shanghai.aliyuncs.com/",
      jkCount: "",
      o_o: "",
      zong: "",
      hunRemData: "",
      photos: "",
      liCheng: "",
      url: "",
      imgShow: false,
      width: "10",
      countXY: "",
      CountMonitoring: "",
      tianqi: {}
    };
  },
  created() { },
  mounted() {
    this.$axios
      .get(
        "https://v0.yiketianqi.com/api?version=v10&appid=29886216&appsecret=9zzGvRmJ&cityid=101190801"
      )
      .then((res) => {
        this.tianqi = res.data;
        this.analysis[5].number = res.data.so2 + "ug/m³";
        this.analysis[11].number = res.data.o3 + "ug/m³";
      })
      .catch(() => { });

    this.$api
      .count_PCCountXY({ section_id: localStorage.getItem("section_id") })
      .then((res) => {
        this.countXY = res.data;
      })
      .catch((error) => {
        console.log("错误:", error);
      });

    this.$api
      .MonitoringCountMonitoring({
        section_id: localStorage.getItem("section_id"),
      })
      .then((res) => {
        this.CountMonitoring = res.data;
        console.log(res.data);
      })
      .catch((error) => {
        console.log("错误:", error);
      });

    this.schart1();
  },
  methods: {
    showCi(url) {
      this.url = url;
      this.imgShow = true;
    },
    chart1() {
      const data = [
        { year: "1991", value: 3 },
        { year: "1992", value: 4 },
        { year: "1993", value: 3.5 },
        { year: "1994", value: 5 },
        { year: "1995", value: 4.9 },
        { year: "1996", value: 6 },
        { year: "1997", value: 7 },
        { year: "1998", value: 9 },
        { year: "1999", value: 13 },
      ];
      const chart = new Chart({
        container: "container1",
        autoFit: true,
        height: 140,
      });

      chart.data(data);
      chart.scale({
        year: {
          range: [0, 1],
        },
        value: {
          min: 0,
          nice: true,
        },
      });

      chart.tooltip({
        showCrosshairs: false, // 展示 Tooltip 辅助线
        showMarkers: false,
        shared: true,
      });

      chart
        .line()
        .position("year*value")
        .label("value");
      chart.point().position("year*value");

      chart.render();
    },
    chart2() {
      // 默认已经加载 legend-filter 交互
      const data = [
        { month: "Jan", city: "Tokyo", temperature: 7 },
        { month: "Jan", city: "London", temperature: 3.9 },
        { month: "Feb", city: "Tokyo", temperature: 6.9 },
        { month: "Feb", city: "London", temperature: 4.2 },
        { month: "Mar", city: "Tokyo", temperature: 9.5 },
        { month: "Mar", city: "London", temperature: 5.7 },
        { month: "Apr", city: "Tokyo", temperature: 14.5 },
        { month: "Apr", city: "London", temperature: 8.5 },
        { month: "May", city: "Tokyo", temperature: 18.4 },
        { month: "May", city: "London", temperature: 11.9 },
        { month: "Jun", city: "Tokyo", temperature: 21.5 },
        { month: "Jun", city: "London", temperature: 15.2 },
        { month: "Jul", city: "Tokyo", temperature: 25.2 },
        { month: "Jul", city: "London", temperature: 17 },
        { month: "Aug", city: "Tokyo", temperature: 26.5 },
        { month: "Aug", city: "London", temperature: 16.6 },
        { month: "Sep", city: "Tokyo", temperature: 23.3 },
        { month: "Sep", city: "London", temperature: 14.2 },
        { month: "Oct", city: "Tokyo", temperature: 18.3 },
        { month: "Oct", city: "London", temperature: 10.3 },
        { month: "Nov", city: "Tokyo", temperature: 13.9 },
        { month: "Nov", city: "London", temperature: 6.6 },
        { month: "Dec", city: "Tokyo", temperature: 9.6 },
        { month: "Dec", city: "London", temperature: 4.8 },
      ];

      const chart = new Chart({
        container: "container2",
        autoFit: true,
        height: 140,
      });

      chart.data(data);
      chart.scale({
        month: {
          range: [0, 1],
        },
        temperature: {
          nice: true,
        },
      });

      chart.tooltip({
        showCrosshairs: true,
        shared: true,
      });

      chart.axis("temperature", {
        label: {
          formatter: (val) => {
            return val + " °C";
          },
        },
      });

      chart
        .line()
        .position("month*temperature")
        .color("city")
        .shape("smooth");

      chart
        .point()
        .position("month*temperature")
        .color("city")
        .shape("circle")
        .style({
          stroke: "#fff",
          lineWidth: 1,
        });

      chart.render();
    },
    chart4() {
      const data = [
        { year: "1991", value: 3 },
        { year: "1992", value: 4 },
        { year: "1993", value: 3.5 },
        { year: "1994", value: 5 },
        { year: "1995", value: 4.9 },
        { year: "1996", value: 6 },
        { year: "1997", value: 7 },
        { year: "1998", value: 9 },
        { year: "1999", value: 13 },
      ];
      const chart = new Chart({
        container: "container4",
        autoFit: true,
        height: 140,
      });

      chart.data(data);
      chart.scale({
        year: {
          range: [0, 1],
        },
        value: {
          min: 0,
          nice: true,
        },
      });

      chart.tooltip({
        showCrosshairs: true, // 展示 Tooltip 辅助线
        shared: true,
      });

      chart
        .line()
        .position("year*value")
        .label("value");
      chart.point().position("year*value");

      chart.render();
    },
    schart1() {
      this.$axios
        .get(
          "https://www.tianqiapi.com/api?version=v1&appid=53622763&appsecret=NFgVUwV2&cityid=101220101"
        )
        .then((res) => {
          var data5 = res.data.data[0].air;
          var data6 = res.data.data[0].air_level;
          this.tq9 = res.data.data[0].air;
          this.tq3 = res.data.data[0].air_level;
          let myChart1 = echarts.init(document.getElementById("schart2"));
          let option1 = {
            title: {
              //   top: 20,
              left: "center",
              //   text: "空气质量指数",
              textStyle: {
                //  padding: 5,				// 提示框浮层的文本样式。...
                color: "#BDEDF4",
              },
            },
            // backgroundColor: "#000",
            tooltip: {
              // 本系列特定的 tooltip 设定。
              show: true,
              formatter: "{b}：{c}%",
              backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
              borderColor: "#fff", // 提示框浮层的边框颜色。...
              borderWidth: 10, // 提示框浮层的边框宽。...
              padding: 25, // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。...
              textStyle: {
                // 提示框浮层的文本样式。...
                // color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
              },
            },

            series: [
              {
                name: "单仪表盘示例", // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
                type: "gauge", // 系列类型
                radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
                center: ["50%", "60%"], // 仪表盘位置(圆心坐标)
                startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
                endAngle: -45, // 仪表盘结束角度,默认 -45
                clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
                min: 0, // 最小的数据值,默认 0 。映射到 minAngle。
                max: 400, // 最大的数据值,默认 100 。映射到 maxAngle。
                splitNumber: 5, // 仪表盘刻度的分割段数,默认 10。

                axisLine: {
                  // 仪表盘轴线(轮廓线)相关配置。
                  show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
                  lineStyle: {
                    // 仪表盘轴线样式。
                    color: [
                      [0.125, "#3EFF25"],
                      [0.25, "#E1FF22"],
                      [0.375, "#FFD228"],
                      [0.5, "#FFA337"],
                      [0.75, "#FF4B00"],
                      [1, "red"],
                    ], //仪表盘的轴线可以被分成不同颜色的多段。每段的  结束位置(范围是[0,1]) 和  颜色  可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
                    opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                    width: 30, //轴线宽度,默认 30。
                    // shadowBlur: 20,				//(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                    // shadowColor: "#ccc",		//阴影颜色。支持的格式同color。
                  },
                },

                splitLine: {
                  // 分隔线样式。
                  show: false, // 是否显示分隔线,默认 true。
                  length: 30, // 分隔线线长。支持相对半径的百分比,默认 30。
                  lineStyle: {
                    // 分隔线样式。
                    color: "#aaa", //线的颜色,默认 #eee。
                    opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                    width: 2, //线度,默认 2。
                    type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
                    shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                    shadowColor: "#ccc", //阴影颜色。支持的格式同color。
                  },
                },

                axisTick: {
                  // 刻度(线)样式。
                  show: false, // 是否显示刻度(线),默认 true。
                  splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
                  length: 8, // 刻度线长。支持相对半径的百分比,默认 8。
                  lineStyle: {
                    // 刻度线样式。
                    color: "#eee", //线的颜色,默认 #eee。
                    opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                    width: 1, //线度,默认 1。
                    type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
                    // // shadowBlur: 10,				//(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                    // shadowColor: "#fff",		//阴影颜色。支持的格式同color。
                  },
                },

                axisLabel: {
                  // 刻度标签。
                  show: false, // 是否显示标签,默认 true。
                  distance: 10, // 标签与刻度线的距离,默认 5。
                  color: "#fff", // 文字的颜色,默认 #fff。
                  fontSize: 15, // 文字的字体大小,默认 5。
                  formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
                },

                pointer: {
                  // 仪表盘指针。
                  show: false, // 是否显示指针,默认 true。
                  length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
                  width: 5, // 指针宽度,默认 8。
                },

                itemStyle: {
                  // 仪表盘指针样式。
                  color: "auto", // 指针颜色，默认(auto)取数值所在的区间的颜色
                  opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                  borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
                  borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
                  borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
                  // shadowBlur: 10,			// (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                  // shadowColor: "#fff",	// 阴影颜色。支持的格式同color。
                },

                title: {
                  // 仪表盘标题。
                  show: true, // 是否显示标题,默认 true。
                  offsetCenter: [0, 0], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
                  color: "#3EFF25", // 文字的颜色,默认 #333。
                  fontSize: 15,
                  fontWeight: 15, // 文字的字体大小,默认 15。
                },

                data: [
                  {
                    name: data6,
                    value: data5,
                  },
                ],
              },
            ],
          };

          myChart1.setOption(option1);
          window.addEventListener("resize", () => {
            myChart1.resize();
          });
        });
    },
    // 指定进度条文字
    format(percentage) {
      if (percentage == 0) {
        return "故障\n0";
      }
      return percentage === 100 ? "正常\n" + this.jkCount : `${percentage}%`;
    },

    format3(percentage) {
      if (percentage == 100) {
        return "故障\n0";
      }
    },

    format1(percentage) {
      if (percentage == 0) {
        return "故障\n0";
      }
      return percentage === 100 ? "正常\n" + this.o_o : `${percentage}%`;
    },
  },
};
</script>
<style src="./css/page02.css" scoped>
</style>
